<!-- 用户角色新增、修改 -->
<template>
  <div>
    <el-dialog :title="roleData.title" :visible.sync="roleData.showModal" width="650px" top="5vh">
      <el-form label-width="100px" :model="data" ref="update" :rules="rules" v-loading="showLoading" :element-loading-text="$t('lan.dataLoading')">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.roleName')" prop="name">
              <el-input size="medium" :placeholder="$t('lan.pleaseRole')" v-model="data.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.remark')" prop="content">
              <el-input type="textarea" :rows="3" v-model="data.content" :placeholder="$t('lan.pleaseRemark')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="add">{{$t('lan.submit')}}</el-button>
        <el-button size="medium" @click="roleData.showModal = false">{{$t('lan.cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['roleData'],
  data () {
    return {
      showLoading: false,//是否显示loading
      title: '',//标题
      //提交的数据
      data: {
        name: '',
        content: '',
        id: '',
      },
      //表单校验
      rules: {
        name: [{ required: true, message: this.$t('lan.roleEmpty'), trigger: 'blur' }],
        content: [{ required: true, message: this.$t('lan.remarkEmpty'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    //新增、修改角色
    add () {
      this.$refs['update'].validate(async (valid) => {
        if (valid) {
          this.showLoading = true
          let url = this.roleData.type == 'create' ? '/role/save' : '/role/update'
          let httpMethod = this.roleData.type == 'create' ? 'POST' : 'PUT'
          let result = await this.request.httpRequest(httpMethod, url, this.data)
          if (result.code == 200) {

            this.roleData.showModal = false
            this.$message({ type: 'success', message: result.msg })
            this.$emit('close')
          } else {
            this.$message({ type: 'error', message: result.msg })
          }
          this.showLoading = false
        }
      })
    },
    //获取详情
    async getDetail () {
      if (this.roleData.roleId) {
        let url = `/role/get/${this.roleData.roleId}`
        let result = await this.request.httpRequest('GET', url)
        if (result.code == 200) {
          this.data.id = result.data.id
          this.data.name = result.data.name
          this.data.content = result.data.content
        } else {
          this.$message({ type: 'error', message: result.msg })
        }
      }
    },
  },
  mounted () {
    this.getDetail();
  }
}
</script>
